import React from 'react';
import sendHttp from '../http/sendHttp';

class CateList extends React.Component{
    all = {
        cate_name: "全部", 
        id: 0
    }
    state = {
        cateList: [],
        // 当前选中的一级分类索引
        activeIndex: 0,
        twoIndex: 0,
        sortList: ["默认", "价格", "上架时间"],
        sortIndex: 0
    }
    render() {
        let { cateList, activeIndex, twoIndex, sortList, sortIndex } = this.state;
        return (
            <div className='cateList'>
                <div className='one'>
                    {
                        cateList.map((item, index) => {
                            return <div key={index} className={activeIndex === index ? 'active' : ''} onClick={() => {
                                this.setState({
                                    activeIndex: index,
                                    twoIndex: 0
                                },()=>{
                                    this.sendParams();
                                })
                            }}>{item.cate_name}</div>
                        })
                    }
                </div>
                <div className='two'>
                    <div>分类:</div>
                    <div className='cate'>
                        {
                            cateList.length !== 0 && cateList[activeIndex].children.map((item, index) => {
                                return <div key={index} className={twoIndex === index ? 'active' : ''} onClick={() => {
                                    this.setState({
                                        twoIndex: index,
                                    },()=>{
                                        this.sendParams();
                                    })
                                }}>{item.cate_name}</div>
                            })
                        }
                    </div>
                </div>
                <div className='sort'>
                    {
                        sortList.map((item, index) => {
                            return <div key={index} className={sortIndex === index ? 'active' : ""} onClick={() => {
                                this.setState({
                                    sortIndex: index
                                },()=>{
                                    this.sendParams();
                                })
                            }}>{item}</div>
                        })
                    }
                </div>
            </div>
        )
    }
    // sendHttp(method, url) {
    //     return new Promise((relove, reject) => {
    //         let xhr = new XMLHttpRequest();
    //         xhr.open(method, url);
    //         xhr.send();
    //         xhr.onreadystatechange = () => {
    //             if (xhr.readyState === 4) {
    //                 let res = JSON.parse(xhr.response);
    //                 relove(res)
    //             }
    //         }
    //     })
    // }
    async componentDidMount() {
        sendHttp("get", "/api/category")
        .then(({data})=>{
            console.log(data.data);
            let res =data
            // 处理数据 
            res.data.forEach((item, index) => {
                item.children.unshift(this.all)
            })
            this.setState({
                cateList: res.data
            },()=>{
                this.sendParams();
            })
        })
    }
    sendParams() {
        let {cateList} = this.state
        // 获取一级分类id
        let cid = cateList[this.state.activeIndex].id
        let sid = cateList[this.state.activeIndex].children[this.state.twoIndex].id;
        let sort = this.state.sortList[this.state.sortIndex]
        // 调用父组件传递过来的函数 并将 一级分类id 二级分类id 排序方法传递给父组件
        this.props.getParams(cid, sid, sort);
    }
}

export default CateList